<!-- 探针采集过滤管理 -->
<template>
	<div v-cloak id="probeIpFilterDiv" class="container">
		<!-- 搜索条件 -->
		<yd-form ref="myForm" :options="formOptions" :model="formData" :btns="formBtns"></yd-form>

		<!--查询列表-->
		<YdTable
			ref="multipleTable"
			:formData="formData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			@sizeChangeHandler="queryGrid"
			@currentChangeHandler="queryGrid"
			@sortChangeHandler="queryGrid"
			@selectionChangeHandler="handleSelectionChange"
		>
		</YdTable>

		<div v-cloak id="addIpFilterDiv">
			<!-- 添加或修改参数配置对话框 -->
			<el-dialog
				v-if="open.addIpFilterDialog"
				:key="dialogTimer"
				v-model="open.addIpFilterDialog"
				:title="title"
				width="1500px"
				append-to-body
				center
				:close-on-click-modal="false"
				@close="cancelIpFilterDialogHandle"
			>
				<!-- 搜索条件 -->
				<yd-form ref="dialogForm" :options="dialogFormOptions" :model="addFormData" :btns="dialogFormBtns"></yd-form>
				<div style="height: 550px">
					<!--查询列表-->
					<YdTable
						ref="addMultipleTable"
						:formData="addFormData"
						:tableConfig="addTableConfig"
						:tableData="addTableData"
						@sizeChangeHandler="addQueryGrid"
						@currentChangeHandler="addQueryGrid"
						@sortChangeHandler="addQueryGrid"
						@selectionChangeHandler="addIpFilterSelectionChangeHandle"
					>
					</YdTable>
				</div>
				<template #footer class="dialog-footer">
					<el-button type="primary" @click="addIpFilterSubmitFormHandle">保 存</el-button>
					<el-button @click="cancelIpFilterDialogHandle">取 消</el-button>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script setup name="ProbeIPFilter" lang="ts">
import { queryInfoFilterIp, editFilterIpInfo, stopFilterIpInfo } from '@/api/management/probeManage/probeIPFilter';
import { querySegmentOptions } from '@/api/search/searchOptions';
import { onMounted, ref, reactive } from 'vue';
import useCurrentInstance from '@/utils/useCurrentInstance';

const { proxy } = useCurrentInstance();

// 选中数组
const ids = ref<any>([]);
// 非单个禁用
const single = ref(true);
// 非多个禁用
const multiple = ref(true);
// 弹出层标题
const title = ref('');
//弹窗刷新时间
const dialogTimer = ref<number>();
// 表单参数
let form = reactive({});
// 是否显示弹出层
let open = reactive({
	addIpFilterDialog: false,
});
//下拉框选项
let options = reactive<anyObj>({
	systemOptions: [],
	segmentOptions: [],
});
let addDialog = reactive<anyObj>({
	ids: [],
	singleSelect: true,
	multipleSelect: true,
});
const formOptions = reactive<FormOptionType>([
	{
		type: 'select',
		label: '应用系统',
		prop: 'systemId',
		selectKey: 'value',
		api: {
			name: 'queryAppSystemOptions',
		},
		cascaders: [
			{
				cascadersParams: 'systemItIdList',
				api: {
					name: 'querySegmentOptions',
				},
			},
		],
	},
	{
		type: 'select',
		label: '网端名称',
		prop: 'systemItIdList',
		selectKey: 'value',
		attrs: {
			multiple: true,
			indeterminate: false,
		},
	},
	{
		type: 'select',
		label: '同步状态',
		prop: 'synchState',
		selectKey: 'value',
		children: [
			{ value: 0, label: '未同步' },
			{ value: 1, label: '已同步' },
		],
	},
	{
		type: 'input',
		label: 'IP',
		prop: 'ip',
		attrs: {
			clearable: true,
		},
	},
]);
const formBtns = reactive<BtnType[]>([
	{
		type: 'primary',
		text: '查询',
		handler: searchHandler,
	},
]);
const dialogFormOptions = reactive<FormOptionType>([
	{
		type: 'select',
		label: '应用系统',
		prop: 'systemId',
		selectKey: 'value',
		api: {
			name: 'queryAppSystemOptions',
		},
		cascaders: [
			{
				cascadersParams: 'systemItIdList',
				api: {
					name: 'querySegmentOptions',
				},
			},
		],
	},
	{
		type: 'select',
		label: '网端名称',
		prop: 'systemItIdList',
		selectKey: 'value',
		attrs: {
			multiple: true,
			indeterminate: false,
		},
	},
]);
const dialogFormBtns = reactive<BtnType[]>([
	{
		type: 'primary',
		text: '查询',
		handler: addIpFilterSearchHandler,
	},
]);
// 搜索表单数据
let formData = reactive<anyObj>({});
// 列表配置
let tableConfig = reactive({
	url: queryInfoFilterIp,
	columns: [
		{
			label: '系统',
			prop: 'systemName',
		},
		{
			label: '网端',
			prop: 'systemItName',
		},
		{
			label: '组件IP',
			prop: 'ip',
		},
		{
			label: '过滤状态',
			prop: 'isFilter',
			formatter(row: anyObj, val: ApiVal) {
				if (val === null || val === '' || val === undefined) {
					return '';
				} else if (val === '0') {
					return '非过滤';
				} else {
					return '过滤';
				}
			},
		},
		{
			label: '同步状态',
			prop: 'synchState',
			formatter(row: anyObj, val: ApiVal) {
				if (val === null || val === '' || val === undefined) {
					return '';
				} else if (val === '0') {
					return '未同步';
				} else {
					return '已同步';
				}
			},
		},
	],
	// 工具栏
	toolBar: [
		{ name: '新增过滤', icon: 'yd-icon-plus', permi: ['probeIpFilter:add'], handler: () => addIpFilterHandle() },
		{ name: '停止过滤', icon: 'yd-icon-stop', permi: ['probeIpFilter:stop'], disable: 'multiple', handler: () => stopIpFilterHandle() },
	],
	// 开启复选框
	enableSelection: true,
	// 开启分页
	pagination: {
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
	// 加载层
	loading: true,
});
// 列表数据
let tableData = ref([]);
//增加ip过滤弹出框
// 搜索表单数据
const addFormData = ref<anyObj>({});
// 列表配置
let addTableConfig = reactive({
	columns: [
		{
			label: '系统',
			prop: 'systemName',
		},
		{
			label: '网端',
			prop: 'systemItName',
		},
		{
			label: '组件IP',
			prop: 'ip',
		},
	],
	// 开启复选框
	enableSelection: true,
	// 开启分页
	pagination: {
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
	// 加载层
	loading: true,
	//表头固定
	height: '500px',
});
// 列表数据
let addTableData = ref([]);

onMounted(() => {
	searchHandler();
});

// 搜索
function searchHandler() {
	formData.pageNum = 1;
	queryGrid();
}
//查询列表数据
function queryGrid() {
	tableConfig.loading = true;
	//设置过滤为1，即已经有过滤
	formData.isFilter = 1;
	queryInfoFilterIp(formData).then((res: ApiResponse) => {
		if (res.code !== 0) {
			proxy.$modal.msgWarning(res.msg);
			tableConfig.loading = false;
			return;
		}
		tableConfig.loading = false;
		tableData.value = res.data.records;
		tableConfig.pagination.total = res.data.total;
	});
}
// 多选框选中数据
function handleSelectionChange(selection: any) {
	ids.value = selection.map((item: anyObj) => item.id);
	single.value = selection.length !== 1;
	multiple.value = !selection.length;
}
/** 停止过滤操作 */
function stopIpFilterHandle() {
	const id = ids.value;
	if (id === null || id === '') {
		proxy.$modal.msgWarning('请选择要停止的过滤信息。');
		return;
	}
	proxy.$modal
		.confirm('确定停止过滤吗？', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			cancelButtonClass: 'confirm-rigth-cancel-button',
			type: 'warning',
		})
		.then(() => {
			stopFilterIpInfo({ ids: id, isFilter: 0 }).then((res) => {
				if (res.code === 0) {
					proxy.$modal.msgSuccess('停止成功');
					searchHandler();
				} else {
					proxy.$modal.msgWarning(res.msg);
				}
			});
		})
		.catch(() => {});
}
/** 新增按钮操作 */
function addIpFilterHandle() {
	title.value = '添加同步过滤';
	dialogTimer.value = new Date().getTime();
	options.segmentOptions = [];
	addIpFilterSearchHandler();
	open.addIpFilterDialog = true;
}
/** 添加同步过滤弹出框 搜索 */
function addIpFilterSearchHandler() {
	addFormData.value.pageNum = 1;
	addQueryGrid();
}
function addQueryGrid() {
	addTableConfig.loading = true;
	//设置过滤为1，即已经有过滤
	addFormData.value.isFilter = 0;
	queryInfoFilterIp(addFormData.value).then((res: ApiResponse) => {
		if (res.code !== 0) {
			proxy.$modal.msgWarning(res.msg);
			addTableConfig.loading = false;
			return;
		}
		addTableConfig.loading = false;
		addTableData.value = res.data.records;
		addTableConfig.pagination.total = res.data.total;
	});
}
// 多选框选中数据
function addIpFilterSelectionChangeHandle(selection: any) {
	addDialog.ids = selection.map((item: anyObj) => item.id);
	addDialog.singleSelect = selection.length !== 1;
	addDialog.multipleSelect = !selection.length;
}
/** 提交按钮 */
function addIpFilterSubmitFormHandle() {
	const ids = addDialog.ids;
	if (ids === null || ids === '' || ids.length < 1) {
		proxy.$modal.msgWarning('请选择数据项');
		return;
	}
	editFilterIpInfo({ ids: ids, isFilter: 1 }).then((res) => {
		if (res.code === 0) {
			proxy.$modal.msgSuccess('保存成功');
			cancelIpFilterDialogHandle();
			searchHandler();
		} else {
			proxy.$modal.msgWarning(res.msg);
		}
	});
}
// 取消按钮
function cancelIpFilterDialogHandle() {
	open.addIpFilterDialog = false;
	addFormData.value = { pageNum: 1, pageSize: 10 };
	addDialog.ids = [];
	proxy.$forceUpdate();
}
async function systemChangeHandle(id: any) {
	if (id === null) {
		return;
	}
	options.segmentOptions = [];
	addFormData.value.systemItIdList = null;
	querySegmentOptions(id).then((res: ApiResponse) => {
		const data = res.data;
		if (data !== null) {
			for (let i = 0; i < data.length; i++) {
				let temp: anyObj = {};
				temp.value = parseInt(data[i].id);
				temp.label = data[i].label;
				options.segmentOptions.push(temp);
			}
		}
	});
	proxy.$forceUpdate();
}
</script>

<style lang="scss" scoped>
.container {
	margin: 10px;
}
</style>

<style>
#probeIpFilterDiv [v-cloak] {
	display: none !important;
}

#addIpFilterDiv [v-cloak] {
	display: none !important;
}
</style>
